import React, { Component } from 'react';

import './index.less';

import { connect } from 'react-redux';

import Scene from './scene';
import CreateShip from './createShip';
import Hydrogeology from './hydrogeology';
import { requestParentData } from './requestParent';

class Main extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selected_submenu: 1 // 选中的子菜单
        };
    }

    onSubMenu = (num) => {
        this.setState({
            selected_submenu: num,
        })
    }

    componentDidMount() {
        requestParentData();
    }

    render() {

        const { waterDepthFileName } = this.props;

        const { selected_submenu } = this.state;

        let content;
        switch (selected_submenu) {
            case 1:
                content = <Scene />;
                break;
            case 2:
                content = <CreateShip />;
                break;
            case 3:
                content = <Hydrogeology />;
                break;
            default:
                break;
        }

        return (
            <div id='dredging-wrap'>
                <header className='dredging-header'>
                    <div className='header-title'>
                        <img alt="" />
                        <span className='title-name'>
                            {waterDepthFileName}
                        </span>
                        {/* <span className='title-name'>
                            万顷沙18号轮
                        </span> */}
                    </div>

                    <ul className='header-menu'>
                        <li className={(selected_submenu === 1) ? 'header-submenu selected' : 'header-submenu'}
                            onClick={() => { this.onSubMenu(1) }}
                        >
                            场景可视化系统
                        </li>
                        <li className={(selected_submenu === 2) ? 'header-submenu selected' : 'header-submenu'}
                            onClick={() => { this.onSubMenu(2) }}
                        >
                            可视化管理系统
                        </li>
                        <li className={(selected_submenu === 3) ? 'header-submenu selected' : 'header-submenu'}
                            onClick={() => { this.onSubMenu(3) }}
                        >
                            水文地质可视化
                        </li>
                    </ul>
                </header>
                {/* 内容部分 */}
                {content}
            </div>
        )
    }
}


function mapStateToProps(state) {
    return {
        waterDepthFileName: state.waterDepthFileName
    }
}

export default connect(mapStateToProps)(Main);
